<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3.事件传参</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 绑定的事件传参总结:
        1.不传参数:@click = "showMsg" ,showMsg会收到一个是事event事件
        2.传一个参数:@click="showMsg()",showMsg会收到一个6
        3.传多个参数,那就写@@click ="showMsg(6,7,8)",showMsg会收到6,7,8
        4.传参的同时还想用事件对象,那就写@click = "showMsg($event,6)",shouMsg会收到:事件对象.6
        5.传参时也可以传入data中的数据,例如@click = "showMsg(name)"
    -->
    <!-- 准备好一个容器-->
    <div id="demo">
        <!-- 传一个 参数-->
        <button @click="showMsg">点我提示信息(不传入参数)</button>
        <button @click ="showMsg1('你好!Vue')">点击我提示信息1</button>
        <button @click = "showMsg2('欢迎你来学习','你好Vue')">点击我提示信息2</button>
        <button @click = "showMsg3($event,'你好Vue')">点击我提示信息3</button>
        <button @click = "showMsg4(name)">点击我提示信息4</button>
    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false
    new Vue({
        el: '#demo',
        data: {
            name: '尚硅谷',
            address: '宏福科技园'
        },
        methods: {
            showMsg(e) {
                alert(e)
               console.log(e)//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
            },
            showMsg1(message) {
                alert(`同学你好! ${message}`)   
            },
            showMsg2(message1,message2) {
                alert(`同学你好! ${message1},${message2}`)   
            },
            showMsg3(e,message2) {
                console.log(e);
                alert(`同学你好! ,${message2}`)   
            },
            showMsg4(name) {               
                alert(`学校名称:${name},学校地址:${this.address}`)   
            },
        }
    })
</script>

</html>